<template>
  <el-drawer with-header :visible.sync="open_course" direction="rtl" size="25%" :show-close="false"
    :wrapperClosable="false">


    <el-row :gutter="20">
      <el-col :span="12">
        <div class="ml30">
          <div class="grid-content bg-purple-dark    text-size-23-w700  ">创建课程</div>

          <div class="grid-content bg-purple     text-size-14 mt20 text-gray  ">创建后，可办理该课程报名业务</div>

        </div>

      </el-col>
      <el-col :span="12">
        <div class="classflex-end">

          <el-button @click="cancel" style="width: 100px;margin-right: 100px;">取消</el-button>

        </div>

      </el-col>
    </el-row>


    <el-form :hide-required-asterisk="true" class=" ml30 mr30" ref="form" :model="form" :rules="rules_course"
      label-width="80px" label-position="top">
      <el-divider style="width: 80%;"></el-divider>
      <div>
        <div class="grid-content bg-purple    text-size-20-mt10-black  ">课程名称</div>
      </div>
      <div>
        <div class="grid-content bg-purple    text-size-14 text-gray mt10 ">例如:少儿美术初级课程、英语初级课程....</div>
      </div>
      <el-form-item label=" " prop="courseName">
        <el-input style="width: 80%;" v-model="form.courseName" placeholder="请输入课程名称" />
      </el-form-item>
      <div>
        <div class="grid-content bg-purple    text-size-20-mt10-black  ">教学科目</div>
      </div>
      <div>
        <div class="grid-content bg-purple   text-size-14 text-gray mt10 ">请选择课程对应的教学科目</div>
      </div>
      <el-form-item label=" " prop="courseSubject">


        <!-- <el-select style="width: 80%;" v-model="form.courseSubject" placeholder="请选择课程科目">
          <el-option v-for="dict in dict.type.course_subject" :key="dict.value" :label="dict.label" :value="dict.value">
          </el-option>
        </el-select>
 -->
        <el-input style="width: 80%;" v-model="form.courseSubject" placeholder="请输入课程科目" />
      </el-form-item>
      <div>
        <div class="grid-content bg-purple    text-size-20-mt10-black  ">授课模式</div>
      </div>
      <div>
        <div class="grid-content bg-purple    text-size-14 text-gray mt10 ">班课模式需要在课程下分班排课，一对一模式可直接为学员排课</div>
      </div>
      <el-form-item label=" " prop="courseTeachingMode">
        <el-select style="width: 80%;" v-model="form.courseTeachingMode" placeholder="请选择授课模式">
          <el-option v-for="dict in dict.type.course_teaching_mode" :key="dict.value" :label="dict.label"
            :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-divider></el-divider>
      <div>
        <el-button type="primary" @click="submitForm" style="width: 100%;">立即创建</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-form>

  </el-drawer>
</template>

<script>
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";

  export default {
    name: "Course",
    dicts: ['course_teaching_mode', 'course_state', 'course_subject'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程管理表格数据
        courseList: [],

        // 是否显示弹出层
        open_course: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          courseId: null,
          courseName: null,
          courseSubject: null,
          courseTeachingMode: null,
          courseAutoFinish: null,
          courseState: null,
          courseNowStudent: null,
          courseOverStudent: null,
          deptId: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 弹出层标题
        title: "",
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        rules_course: {
          courseName: [{
              required: true,
              message: '请输入课程名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 15,
              message: '长度在 1 到 15 个字符',
              trigger: 'blur'
            }
          ],
          courseTeachingMode: [{
            required: true,
            message: '请选择授课模式',
            trigger: 'change'
          }],

        
            courseSubject: [{
                required: true,
                message: '请选择课程科目',
                trigger: 'change'
              }

            ],

          },
        };
      },
      created() {
          this.getList();
        },
        methods: {
          open() {
            this.open_course = true;
          },
          /** 查询课程管理列表 */
          getList() {
            this.loading = true;
            this.queryParams.deptId = this.$store.state.user.deptId;
            this.queryParams.courseState = "在开课程";
            listCourse(this.queryParams).then(response => {
              this.courseList = response.rows;
              this.total = response.total;
              this.loading = false;
            });
          },
          // 取消按钮
          cancel() {
            this.open_course = false;
            this.reset();
          },
          // 表单重置
          reset() {
            this.form = {
              id: null,
              courseId: null,
              courseName: null,
              courseSubject: null,
              courseTeachingMode: null,
              courseAutoFinish: null,
              courseState: null,
              courseNowStudent: null,
              courseOverStudent: null,
              deptId: null,
              delFlag: null,
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              remark2: null,
              remark3: null,
              remark4: null,
              remark5: null,
              remark6: null,
              remark7: null,
              remark8: null,
              remark9: null,
              remark10: null
            };
            this.resetForm("form");
          },
          /** 搜索按钮操作 */
          handleQuery() {

          },



          /** 修改按钮操作 */
          handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            getCourse(id).then(response => {
              this.form = response.data;
              this.open_course = true;
              this.title = "修改课程管理";
            });
          },
          /** 提交按钮 */
          submitForm() {
            this.$refs["form"].validate(valid => {
              if (valid) {
                this.form.deptId = this.$store.state.user.deptId;
                if (this.form.id != null) {
                  updateCourse(this.form).then(response => {
                    this.$modal.msgSuccess("修改成功");
                    this.open_course = false;


                  });
                } else {
                  addCourse(this.form).then(response => {
                    this.$modal.msgSuccess("新增成功");
                    this.open_course = false;
                    this.$emit('AddCourseDrawerSuccess', 'AddCourseDrawer'); // 触发名为'childEvent'的自定义事件，并传递数据
                    this.reset();
                  });
                }
              }
            });
          },
          /** 删除按钮操作 */
          handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除课程管理编号为"' + ids + '"的数据项？').then(function() {
              return delCourse(ids);
            }).then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
          },
          /** 导出按钮操作 */
          handleExport() {
            this.download('course/course/export', {
              ...this.queryParams
            }, `course_${new Date().getTime()}.xlsx`)
          }
        }
    };
</script>
<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>
